<app-page-list (create)="create()" (refresh)="load()" (search)="search($event)" [loading]="loading">

  <nz-table
    nzSize="small"
    [nzData]="datum"
    [nzFrontPagination]="false"
    [nzLoading]="loading"
    [nzTotal]="total"
    [nzPageSize]="pageSize"
    [nzPageIndex]="pageIndex"

    (nzQueryParams)="onQuery($event)"
  >
    <thead>
    <tr>
      <th nzColumnKey="id" [nzSortFn]="true">ID</th>
      <th nzColumnKey="name" [nzSortFn]="true">名称</th>
      <th nzColumnKey="type" [nzSortFn]="true">类型</th>
      <th nzColumnKey="tags">标签</th>
      <th nzColumnKey="manufacturer" [nzSortFn]="true">厂商</th>
      <th nzColumnKey="version" [nzSortFn]="true">型号</th>
      <th nzColumnKey="id" [nzSortFn]="true">创建时间</th>
      <th nzWidth="100">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of datum; let i=index" (dblclick)="open(data)">
      <td>{{ data.id }}</td>
      <td>{{ data.name }}</td>
      <td>{{ data.type }}</td>
      <td>{{ data.tags?.join(',') }}</td>
      <td>{{ data.manufacturer }}</td>
      <td>{{ data.version }}</td>
      <td [title]="data.created|dateString">{{data.created | fromNow}}</td>
      <td>
        <a [routerLink]="'/admin/product/detail/'+data.id">详情</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a [routerLink]="'/admin/product/edit/'+data.id">编辑</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a nz-dropdown [nzDropdownMenu]="menu" nzTrigger="click">
          更多
          <i nz-icon nzType="down"></i>
        </a>
        <nz-dropdown-menu #menu="nzDropdownMenu">
          <ul nz-menu>
            <li nz-menu-item nzDanger nz-popconfirm nzPopconfirmTitle="确定删除？" (nzOnConfirm)="remove(data, i)">删除</li>
          </ul>
        </nz-dropdown-menu>
      </td>
    </tr>
    </tbody>
  </nz-table>


</app-page-list>
